@extends('wx.layout.default')

@section('wx.content')

  @if(count($user->enrol)>=1)
    <div class="weui-msg">
      <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
      <div class="weui-msg__text-area">
        <h2 class="weui-msg__title">培训报名成功</h2>
        <p class="weui-msg__desc">请按照考试时间和上课时间准时参加。</p>
      </div>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__hd">已报名的培训课程</div>
      @foreach($user->enrol as $enrol)
        <div class="weui-panel__hd ">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title dark">{{$enrol->grade->name}}</h4>
            <p class="weui-media-box__desc">　　{{$enrol->grade->exam}} <br>　　{{$enrol->grade->desc}}</p>
            <ul class="weui-media-box__info">
              <li class="weui-media-box__info__meta grey">
                考试时间：{{date('Y-m-d',$enrol->grade->exam_date)}} {{ date('H:i',strtotime($enrol->grade->exam_begin)) }}
                -{{ date('H:i',strtotime($enrol->grade->exam_end)) }}</li>
              <li class="weui-media-box__info__meta grey">
                上课时间：{!! $enrol->grade->present()->WeekDay !!} {{ date('H:i',strtotime($enrol->grade->grade_begin)) }}
                -{{ date('H:i',strtotime($enrol->grade->exam_end)) }}</li>
            </ul>
          </div>
        </div>
      @endforeach
    </div>
    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_primary" href="{{route('wx.index')}}">确定</a>
    </div>
  @endif

  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd">公益培训>{{$plan->name}}</div>
    @foreach($grades as $grade)
      @if($user->enroled)
        <div class="weui-panel__hd">
          @else
            <div class="weui-panel__hd selected" data-id="{{$grade->id}}" data-cid="{{$grade->cid}}">
              @endif
              <div class="weui-media-box weui-media-box_text">
                <h4 class="weui-media-box__title dark">{{$grade->name}}</h4>
                <p class="weui-media-box__desc">　　{{$grade->exam}} <br>　　{{$grade->desc}}</p>
                <ul class="weui-media-box__info">
                  <li class="weui-media-box__info__meta blue">招生人数：<b>{{ $grade->number }}</b></li>
                  <li class="weui-media-box__info__meta green">报名人数：<b>{{ $grade->enrols->count() }}</b></li>
                  <li class="weui-media-box__info__meta grey">
                    考试时间：{{date('Y-m-d',$grade->exam_date)}} {{ date('H:i',strtotime($grade->exam_begin)) }}
                    -{{ date('H:i',strtotime($grade->exam_end)) }}</li>
                  <li class="weui-media-box__info__meta grey">
                    上课时间：{!! $grade->present()->WeekDay !!} {{ date('H:i',strtotime($grade->grade_begin)) }}
                    -{{ date('H:i',strtotime($grade->exam_end)) }}</li>
                </ul>
              </div>
            </div>
            @endforeach
        </div>

        @if(!$user->enroled)
          <form class="form-horizontal" id="gradesign" autocomplete="off">
            {{ csrf_field() }}
            <input type="hidden" name="pid" value="{{$plan->id}}"/>
            <input type="hidden" name="uid" value="{{$user->id}}"/>
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                  {{$user->name}}
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" name="mobile" type="tel" placeholder="请输入注册的手机号码" maxlength="11">
                </div>
              </div>
              <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd">
                  <label class="weui-label">验证码</label>
                </div>
                <div class="weui-cell__bd">
                  <input class="weui-input" name="vcode" type="tel" placeholder="请输入验证码" maxlength="6">
                </div>
                <div class="weui-cell__ft">
                  <button class="weui-vcode-btn">获取验证码</button>
                </div>
              </div>
              <div class="weui-btn-area">
                <button class="weui-btn weui-btn_primary" id="btnSign" href="javascript:">确定</button>
              </div>

            </div>

          </form>
        @endif

        @stop

    @section('javascript')
      <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
      <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
      <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
      <script type="text/javascript">
          $(function () {
              $(".selected").on('click', function (e) {
                  $(this).addClass("grade-selected");
                  $(".selected").not(this).removeClass("grade-selected");
              });

              $("#gradesign").validate({

                  onfocusout: false,
                  onkeyup: false,

                  rules: {
                      mobile: {required: true, isMobile: true},
                  },
                  messages: {
                      mobile: {required: "请填写手机号码"},
                  },

                  showErrors: function (errorMap, errorList) {
                      $.each(errorList, function (i, v) {
                          layer.tips(v.message, v.element, {tips: 3, time: 2000});
                          return false;
                      });
                  },

                  submitHandler: function (form) {
                      $.post('{{route('wx.enrol')}}', {
                          '_token': $("input[name='_token']").attr('value'),
                          'mobile': $("input[name='mobile']").val(),
                          'pid': $("input[name='pid']").val(),
                          'uid': $("input[name='uid']").val(),
                          'gid': $('.grade-selected').data('id'),
                          'cid': $('.grade-selected').data('cid'),
                          'is_submit': true
                      }, function (data) {
                          console.log(data);
                          layer.msg(data.message, {shift: -1}, function () {
                              if (data.status === true && data.url != null) {
                                  $(window).attr('location', data.url);
                              }
                          });

                      }, 'json').error(function (data) {
                          layer.msg(data.responseJSON.message);
                      });
                  }

              });


          });
      </script>
@stop